<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        background: none;
      }
      .demo {
  margin: 16px;
}
.demo-nav {
  height: 30px;
  line-height: 30px;
  margin-bottom: 16px;
  background: #f8f8f8;
}
.demo-nav a {
  line-height: 30px;
  padding: 0 8px;
}
.app-list {
  margin-top: 16px;
}
  [data-theme="dark"] .demo-nav {
    background: #141414;
  }

    </style>
    <script>
      // sync parent style generated by style-loader into iframe
      if (parent.location.port) {
        [].forEach.call(parent.document.getElementsByTagName('head')[0].querySelectorAll('style'), function(node) {
          document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      } else {
        // append parent stylesheet
        [].forEach.call(parent.document.querySelectorAll('link[rel=stylesheet]'), function(node) {
          node && document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      }
    </script>
  </head>
  <body>
    <div id="components-breadcrumb-demo-router-4"></div>
    <script>
      function require(module) {
        if (module === 'react-router') {
          return window.ReactRouter;
        }
        if (module === 'react-router-dom') {
          return window.ReactRouterDOM;
        }
        return window.parent[module];
      }
      var mountNode = document.getElementById('components-breadcrumb-demo-router-4');
      var React = require('react');
      var ReactDOM = require('react-dom');
    </script>
    <script src="https://unpkg.com/react-router-dom@4/umd/react-router-dom.min.js"></script>
    <script>
      function bishengPluginReactPreviewer() {
  var React = require("react");

  var ReactDOM = require("react-dom");

  var _reactRouterDom = require("react-router-dom");

  var _antd = require("antd");

  var Apps = function Apps() {
    return /*#__PURE__*/React.createElement("ul", {
      className: "app-list"
    }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/apps/1"
    }, "Application1"), "\uFF1A", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/apps/1/detail"
    }, "Detail")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/apps/2"
    }, "Application2"), "\uFF1A", /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/apps/2/detail"
    }, "Detail")));
  };

  var breadcrumbNameMap = {
    '/apps': 'Application List',
    '/apps/1': 'Application1',
    '/apps/2': 'Application2',
    '/apps/1/detail': 'Detail',
    '/apps/2/detail': 'Detail'
  };
  var Home = (0, _reactRouterDom.withRouter)(function (props) {
    var location = props.location;
    var pathSnippets = location.pathname.split('/').filter(function (i) {
      return i;
    });
    var extraBreadcrumbItems = pathSnippets.map(function (_, index) {
      var url = "/".concat(pathSnippets.slice(0, index + 1).join('/'));
      return /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, {
        key: url
      }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
        to: url
      }, breadcrumbNameMap[url]));
    });
    var breadcrumbItems = [/*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, {
      key: "home"
    }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/"
    }, "Home"))].concat(extraBreadcrumbItems);
    return /*#__PURE__*/React.createElement("div", {
      className: "demo"
    }, /*#__PURE__*/React.createElement("div", {
      className: "demo-nav"
    }, /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/"
    }, "Home"), /*#__PURE__*/React.createElement(_reactRouterDom.Link, {
      to: "/apps"
    }, "Application List")), /*#__PURE__*/React.createElement(_reactRouterDom.Switch, null, /*#__PURE__*/React.createElement(_reactRouterDom.Route, {
      path: "/apps",
      component: Apps
    }), /*#__PURE__*/React.createElement(_reactRouterDom.Route, {
      render: function render() {
        return /*#__PURE__*/React.createElement("span", null, "Home Page");
      }
    })), /*#__PURE__*/React.createElement(_antd.Alert, {
      style: {
        margin: '16px 0'
      },
      message: "Click the navigation above to switch:"
    }), /*#__PURE__*/React.createElement(_antd.Breadcrumb, null, breadcrumbItems));
  });
  return /*#__PURE__*/React.createElement(_reactRouterDom.HashRouter, null, /*#__PURE__*/React.createElement(Home, null));
}
    </script>
    <script>
      var ReactDOM = require('react-dom');
      var app = bishengPluginReactPreviewer();

      if (true) {
        var container = null;
        app = React.createElement(
          require('antd').ConfigProvider,
          {
            getPopupContainer() { return container; },
          },
          [
            React.cloneElement(app, { key: 'AppContent' }),
            React.createElement('div', {
              key: 'InjectProviderHolder',
              ref(node) { container = node; },
            }),
          ],
        );
      }

      ReactDOM.render(app, mountNode);
    </script>
    <script src="https://unpkg.com/theme-switcher/dist/index.min.js"></script>
    <script>
      var timestamp = new Date().getTime();
      // handle message with parent
      function handleMessage(evt) {
        try {
          var result = JSON.parse(event.data);
          switch (result.action) {
            //
            case 'change.theme': {
              var themeData = result.data;
              var theme = themeData.theme;
              var themeConfig = themeData.themeConfig;
              if (window.ThemeSwitcher) {
                var themeSwitcher = window.ThemeSwitcher(themeConfig);
                themeSwitcher.switcher({
                  theme: theme,
                  useStorage: false,
                });
              }
              break;
            }
            default: {}
          }
        } catch (_) {
          console.error('[Demo] handleMessage error', _);
        }
      }

      window.addEventListener('message', handleMessage, false);
    </script>
  </body>
</html>
